<template>
  <view class="game-background">
    <view
      v-for="(layer, index) in backgroundLayers"
      :key="index"
      class="parallax-layer"
      :style="layerAnimationStyle(layer, index)"
    ></view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import imageConfig from '@/utils/imagesManager.js'

const props = defineProps({
  backgroundLayers: {
    type: Array,
    default: () => []
  },
  speeds: {
    type: Array,
    default: () => []
  }
})

// 动态计算每个图层的动画样式
const layerAnimationStyle = (layer, index) => {
  const speed = props.speeds[index] || 0.1
  const isLeft = speed > 0
  const absoluteSpeed = Math.abs(speed)
  const duration = (1 / absoluteSpeed) * 5 // 调整系数控制滚动速度

  return {
    backgroundImage: `url(${getImage(layer.page, layer.name)})`,
    zIndex: index + 1,
    animationDuration: `${duration}s`,
    animationDirection: isLeft ? 'normal' : 'reverse',
    width: '200%' // 确保无缝滚动
  }
}

// 获取图片路径
const getImage = (page, name) => {
  return imageConfig.getImg(page, name)
}
</script>

<style scoped>
.game-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.parallax-layer {
  position: absolute;
  height: 100%;
  background-repeat: repeat-x;
  background-position: 0 center;
  background-size: auto 100%;
  animation: parallax linear infinite;
}

@keyframes parallax {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* 移动容器宽度的一半 */
}
</style>